<template>
	<div class="fight-detail">
    <div class="fight-goods">
      <div class="title">已关联产品</div>
      <div class="goods-table">
        <w-table :columns="columns">
          <tr>
            <!-- 商品基本信息 -->
            <td class="goods">
              <img :src="goodsRulesList.goodsMainPhotoPath" @click="goGoodsDetail(goodsRulesList.goodsId)">
              <p @click="goGoodsDetail(goodsRulesList.goodsId)">{{goodsRulesList.goodsName}}</p>
            </td>
            <!-- 拼单编号 -->
            <td>
              {{goodsRulesList.goodsSerial}}
            </td>
            <!-- 分类 -->
            <td>
              {{goodsRulesList.gcName}}
            </td>
          </tr>
        </w-table>
      </div>
    </div>
    <div class="fight-rule">
      <div class="title">拼单规则</div>
      <div class="bor">
        <div>拼单结束时间： 
          <span>{{goodsRulesList.gameOver}}</span>
        </div>
        <div class="mar">商品类型： 
          <span v-text="goodsType"></span>
        </div>
        <div>拼单参数配置</div>
        <div class="SKU">
          <table class="table">
            <thead>
              <th>颜色</th><th>颜色最低发货量</th><th>尺码</th><th>采购商最低起订量</th><th v-if="goodsRulesList.goodsNumType == '1'">商品数量</th>
            </thead>
            <!-- SKU组合 -->
            <sku-group v-for="(item, index) in list" :goods-type="goodsRulesList.goodsNumType" :index="index" :key="index" :specs="item" :readonly="true" :count="true"></sku-group>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { FONT_GOODS_DETAIL_URL } from 'js/config'
  import { apiFight } from 'js/api'
  import skuGroup from './common/SkuGroup.vue'

  export default {
    components: {
      skuGroup
    },
    computed: {
      ...mapGetters(['storeId']),
      list() {
        return JSON.parse(this.goodsRulesList.goodsGsp || '[]')
      }
    },
    data() {
      return {
        goodsType: '',
        columns: [
          {title: '名称', width: '20%'},
          {title: '商品编号'},
          {title: '分类'}
        ],
        params: {
          storeId: '',
          goodsRuleId: this.$route.params.goodsRuleId
        },
        // 获取的数据
        goodsRulesList: []
      }
    },
    created() {
      this.getGoodsCrowdFundRulesList()
      if (this.goodsRulesList.goodsNumType == 1) {
        this.goodsType = '现货'
      } else {
        this.goodsType = '期货'
      }
    },
    methods: {
      /**
       * 获取拼单列表数据
       */
      getGoodsCrowdFundRulesList() {
        this.params.storeId = this.storeId
        apiFight.getGoodsCrowdFundRules(this.params).then(data => {
          this.goodsRulesList = data.goodsRulesList[0] || []
        })
      },
      /***
       * 跳转商品详情
       */
      goGoodsDetail(goodsId) {
        window.open(`${FONT_GOODS_DETAIL_URL}` + goodsId)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .fight-detail {
    background-color: #fff;
    padding: 0 30px;
    .goods {
      cursor: pointer;
      p {
        margin: 0px;
        padding: 15px;
      }
    }
  }
  .title {
    padding-top: 30px;
    margin-bottom: 10px;
  }
  .bor {
    padding: 30px;
    border: 1px solid #e0e0e0;
  }
  .mar {
    margin: 20px 0;
  }
  .SKU {
    width: 448px;
    margin-top: 10px;
  }
</style>